<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Drawing parameters ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        const mainLineWidth = 2.5;
        const arrowLineWidth = 2;
        
        const textFont = 'bold 22px sans-serif';
        const figureFont = 'bold 22px sans-serif';
        const lambdaFont = 'italic bold 28px "Times New Roman", serif';

        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper function to draw an arrow ---
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 12) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            // Draw arrowhead
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }
        
        // --- Coordinate System ---
        const origin = { x: 200, y: 320 };
        const zAxisTop = { x: origin.x, y: 120 };
        const xAxisEnd = { x: 480, y: origin.y };
        const yAxisEnd = { x: origin.x + 200, y: origin.y - 120 };

        ctx.lineWidth = mainLineWidth;
        ctx.font = textFont;

        // Draw Axes
        drawArrow(ctx, origin.x, origin.y, zAxisTop.x, zAxisTop.y);
        drawArrow(ctx, origin.x, origin.y, xAxisEnd.x, xAxisEnd.y);
        drawArrow(ctx, origin.x, origin.y, yAxisEnd.x, yAxisEnd.y);

        // Draw Labels
        ctx.fillText("UP (z)", origin.x, zAxisTop.y - 25);
        ctx.fillText("East (x)", xAxisEnd.x - 40, origin.y + 25);
        ctx.fillText("North (y)", yAxisEnd.x + 45, yAxisEnd.y - 5);
        ctx.fillText("0", origin.x - 25, origin.y + 5);

        // --- Current Sheet ---
        // Equation for the y-axis line: y = m*x + c
        const m = (yAxisEnd.y - origin.y) / (yAxisEnd.x - origin.x); // slope
        const c = origin.y - m * origin.x; // y-intercept

        // Function to find x on the y-axis for a given y
        const getXonYAxis = (y) => (y - c) / m;

        const currentArrowLength = 150;
        // y coordinates for the 7 arrows, 2 below x-axis, 1 on, 4 above
        const arrowYCoords = [
            origin.y + 45,
            origin.y + 25,
            origin.y,
            origin.y - 30,
            origin.y - 60,
            origin.y - 90,
            origin.y - 120
        ];
        
        ctx.lineWidth = arrowLineWidth;

        arrowYCoords.forEach(y => {
            const startX = getXonYAxis(y);
            // Use drawArrow with a smaller head for current arrows
            drawArrow(ctx, startX, y, startX + currentArrowLength, y, 10);
        });

        // Draw lambda symbol
        ctx.font = lambdaFont;
        // Position lambda between the 5th and 6th arrows (from bottom)
        const lambda_y = origin.y - 75; 
        const lambda_x = getXonYAxis(lambda_y) + currentArrowLength * 0.6;
        ctx.fillText("λ", lambda_x, lambda_y);


        // --- Figure Caption ---
        ctx.font = figureFont;
        ctx.fillText("Fig. 2.50", canvas.width / 2, 450);

    </script>
</body>
</html>